:root {
  --background-color: #fff;
  --second-background-color: #f7f7f7;
  --primary-color: #06c;
  --first-text-color: #484848;
  --second-text-color: #4c4c4c;
  --third-text-color: #858585;
  --fourth-text-color: #ededed;
  --default-text-color: #505050;
  --border-color: #b3b3b3;
  --selection-color: #0075eb;
  --shadow-color: rgba(0,0,0,0.2);
  --shadow-hover-color: rgba(0,0,0,0.28);
  --scroll-bar-color: #737373;
  --scroll-bar-bg-color: #e6e6e6;
  --link-color: #484848;
  --copyright-info-color: #c03;
  --avatar-background-color: #06c;
  --loading-progress-bar-color: linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3);
  --lazyload-background-color: rgba(200,200,200,0.5);
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #363636;
    --second-background-color: #313131;
    --primary-color: #06c;
    --first-text-color: #cecbd4;
    --second-text-color: #c7c4ce;
    --third-text-color: #928ca0;
    --fourth-text-color: #242229;
    --default-text-color: #b9b5c2;
    --border-color: #5e5e5e;
    --selection-color: #0075eb;
    --shadow-color: rgba(128,128,128,0.2);
    --shadow-hover-color: rgba(128,128,128,0.28);
    --scroll-bar-color: #262626;
    --scroll-bar-bg-color: #4a4a4a;
    --link-color: #c0bcc8;
    --copyright-info-color: #a30029;
    --avatar-background-color: #005cb8;
    --loading-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
    --lazyload-background-color: rgba(50,50,50,0.5);
  }
}
.light-mode {
  --background-color: #fff;
  --second-background-color: #f7f7f7;
  --primary-color: #06c;
  --first-text-color: #484848;
  --second-text-color: #4c4c4c;
  --third-text-color: #858585;
  --fourth-text-color: #ededed;
  --default-text-color: #505050;
  --border-color: #b3b3b3;
  --selection-color: #0075eb;
  --shadow-color: rgba(0,0,0,0.2);
  --shadow-hover-color: rgba(0,0,0,0.28);
  --scroll-bar-color: #737373;
  --scroll-bar-bg-color: #e6e6e6;
  --link-color: #484848;
  --copyright-info-color: #c03;
  --avatar-background-color: #06c;
  --loading-progress-bar-color: linear-gradient(45deg, #ef0e18, #ff5f00, #eea40b, #1fe708, #00d6d6, #016bd7, #f300f3);
  --lazyload-background-color: rgba(200,200,200,0.5);
}
.dark-mode {
  --background-color: #363636;
  --second-background-color: #313131;
  --primary-color: #06c;
  --first-text-color: #cecbd4;
  --second-text-color: #c7c4ce;
  --third-text-color: #928ca0;
  --fourth-text-color: #242229;
  --default-text-color: #b9b5c2;
  --border-color: #5e5e5e;
  --selection-color: #0075eb;
  --shadow-color: rgba(128,128,128,0.2);
  --shadow-hover-color: rgba(128,128,128,0.28);
  --scroll-bar-color: #262626;
  --scroll-bar-bg-color: #4a4a4a;
  --link-color: #c0bcc8;
  --copyright-info-color: #a30029;
  --avatar-background-color: #005cb8;
  --loading-progress-bar-color: linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);
  --lazyload-background-color: rgba(50,50,50,0.5);
}
.normal-code-theme {
  --code-foreground: #535353;
  --code-background: #f2f2f2;
  --highlight-background: #fafafa;
  --highlight-foreground: #535353;
  --highlight-comment: #8e908c;
  --highlight-red: #c82829;
  --highlight-orange: #f5871f;
  --highlight-yellow: #eab700;
  --highlight-green: #718c00;
  --highlight-aqua: #3e999f;
  --highlight-blue: #4271ae;
  --highlight-purple: #8959a8;
  --highlight-gutter-color: #595959;
  --highlight-gutter-bg-color: #f2f2f2;
}
.night-code-theme {
  --code-foreground: #bab6c3;
  --code-background: #313131;
  --highlight-background: #323232;
  --highlight-foreground: #bab6c3;
  --highlight-comment: #969896;
  --highlight-red: #c66;
  --highlight-orange: #de935f;
  --highlight-yellow: #f0c674;
  --highlight-green: #b5bd68;
  --highlight-aqua: #8abeb7;
  --highlight-blue: #81a2be;
  --highlight-purple: #b294bb;
  --highlight-gutter-color: #bcb9c5;
  --highlight-gutter-bg-color: #313131;
}
pre,
.highlight {
  overflow: auto;
  margin: 20px 0;
  padding: 0;
  font-size: 0.96rem;
  color: var(--highlight-foreground);
  background: var(--highlight-background);
  line-height: 1.5rem;
  transition: all 0.5s ease;
}
pre,
code {
  font-family: "Source Code Pro", consolas, Menlo;
}
code {
  padding: 5px;
  word-wrap: break-word;
  color: var(--code-foreground);
  background: var(--code-background);
  border-radius: 2px;
  font-size: 0.96rem;
}
pre {
  padding: 10px;
}
pre code {
  padding: 0;
  color: var(--highlight-foreground);
  background: none;
  text-shadow: none;
}
.highlight {
  border-radius: 1px;
}
.highlight pre {
  border: none;
  margin: 0;
  padding: 10px 0;
}
.highlight table {
  margin: 0;
  width: auto;
  border: none;
  border-spacing: unset;
}
.highlight td {
  border: none;
  padding: 0;
}
.highlight figcaption {
  font-size: 1rem;
  color: var(--highlight-foreground);
  line-height: 1rem;
  margin-bottom: 1rem;
}
.highlight figcaption a {
  float: right;
  color: var(--highlight-foreground);
}
.highlight figcaption a:hover {
  border-bottom-color: var(--highlight-foreground);
}
.highlight .gutter pre {
  padding-left: 10px;
  padding-right: 10px;
  color: var(--highlight-gutter-color);
  text-align: center;
  background-color: var(--highlight-gutter-bg-color);
}
.highlight .code pre {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
  background-color: var(--highlight-background);
}
.highlight .line {
  height: 20px;
}
.gutter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.gist table {
  width: auto;
}
.gist table td {
  border: none;
}
pre .deletion {
  background: var(--highlight-deletion);
}
pre .addition {
  background: var(--highlight-addition);
}
pre .meta {
  color: var(--highlight-purple);
}
pre .comment {
  color: var(--highlight-comment);
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: var(--highlight-red);
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant,
pre .command {
  color: var(--highlight-orange);
}
pre .ruby .class .title,
pre .css .rules .attribute,
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata,
pre .special,
pre .number,
pre .formula {
  color: highlight-green;
}
pre .title,
pre .css .hexcolor {
  color: var(--highlight-aqua);
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: var(--highlight-blue);
}
pre .keyword,
pre .javascript .function {
  color: var(--highlight-purple);
}
